<template>
  <div class="chooseMaterials">
    <el-dialog
      width="920px"
      title="选择生产厂家/品牌"
      :visible.sync="dialogFormVisible"
      custom-class="sorting-code-number"
      :before-close="cancel"
      @opened="initData"
    >
      <div class="el-dialog__body-bodys">
        <div>
          <el-table
            ref="multipleTable"
            max-height="418"
            :data="list"
            :row-class-name="tableRowClassName"
            highlight-current-row
            border
            @row-click="rowClick"
            @selection-change="handleSelectionChange"
            v-if="isTrue"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="manufacturerName" label="厂家名称">
            </el-table-column>
            <el-table-column prop="brandName" label="品牌名称">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="default-mini" @click="cancel"
          >取 消</el-button
        >
        <el-button size="mini" type="primary-font-mini" @click="confirm"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { throttle } from "@/basa/utils";
import { listSmpBrandRelation } from "../api/orderEntry";
// import {deepClone} from "../../../../basa/utils";
export default {
  props: {
    row: {
      type: Object,
      default: () => {}
    },
    showBtn: {
      type: Boolean,
      default: false
    },
    setContractList: {
      type: Array,
      default: () => []
    },
    setTableList: {
      type: Array,
      default: () => []
    },
    contractCode: String

    // setType: {
    //   type: String,
    //   default: ""
    // }
  },
  data() {
    return {
      rowDetail: {},
      id: "",
      List: [],
      isTrue: false,
      setType: "",
      dialogFormVisible: false,
      tableDataList: [],
      formData: {
        matName: "",
        matnum: "",
        pageNo: 1,
        pageSize: 10,
        catalogId: ""
      },
      total: 1000,
      materialsData: "", // 选择数据
      isTurnPage: false, //是否有翻页
      keyWord: "",
      listItemIndex: 1,
      temp: null,
      requestParams: {},
      rowAll: {},
      chooseList: [],
      multipleSelection: [],
      cateType: "" // 当前大类标识
    };
  },
  watch: {
    tableDataList: {
      handler(n) {
        this.list = n;
        if (this.list.length > 0) {
          this.isTrue = true;
        }
      }
    },
    dialogFormVisible: {
      handler(n) {
        if (n) {
          this.init1();
        }
      }
    },
    id: {
      handler(n) {
        if (n && this.contractCode) {
          console.log("调用init", n);
          // this.init(n);
        }
      }
    },
    row: {
      handler(val, oldval) {
        if (val) {
          this.rowAll = val;
          this.$nextTick(() => {
            // if (val && oldval);
            // console.log(
            //   "初始化调用接口",
            //   val.pcConcId,
            //   "老的",
            //   oldval.pcConcId
            // );
            // 这里调的接口
            // if (val.pcConcId && this.contractCode) {
            //   this.init(val.pcConcId);
            // }
          });
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    initData() {
      this.list.forEach(item => {
        if (
          this.rowDetail.manufacturer ==
          item.manufacturerName + "/" + item.brandName
        ) {
          this.$refs.multipleTable.toggleRowSelection(item);
        }
      });
    },
    // 新增行
    addRow(row) {
      console.log("点击新增的row", row);
      const index = this.tableDataList.findIndex(
        _ => _.categoriesCode === "00"
      );
      this.tableDataList.splice(index + 1, 0, {
        categoriesCode: "00",
        manufacturerName: "",
        brandName: ""
      });
    },
    // 删除行
    delRow(row, index) {
      console.log("点击删除的row", row, "位置", index);
      this.tableDataList.splice(index, 1);
      console.log("删除成功");
    },
    // 多选事件
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log("选项改变", this.multipleSelection);
    },
    // handleSelectionChangeOnly(val, row) {
    //   console.log("选择一个", val, row);
    //   console.log(
    //     "1选中数组中是否含有当前选中行",
    //     this.multipleSelection.indexOf(row)
    //   );
    //   // this.multipleSelection.push(row);
    // },
    // handleSelectionChangeAll(val) {
    //   console.log("选择全部", val);
    // },
    openDialog() {
      this.dialogFormVisible = true;
      this.$emit("getVal");
    },
    // 初始化列表
    init1() {
      let params = {
        concMatLessListId: this.rowDetail.pcConcId,
        contractCode: this.contractCode
      };
      console.log("单条查询品牌接口入参", params);
      listSmpBrandRelation(params)
        .then(res => {
          console.log("查询该类别接口返回的数据", res.data.data);
          // this.$nextTick(() => {
          // setTimeout(() => {
          this.tableDataList = res.data.data;
          // this.tableDataList = res.data.data;
          // console.log('判断',this.tableDataList.length > 0);
          // console.log(2222,this.$refs["multipleTable"])
          console.log("数据", this.tableDataList);
          console.log("123", this.isTrue);
          // }, 1000);
          // });
        })
        .catch(e => {
          console.log(e);
        });
      // this.$emit("autocompleteSelect", val);
    },
    rowClick(row) {
      const isExist = this.multipleSelection.includes(row);
      // if (this.multipleSelection.indexOf(row) === -1){
      //   this.multipleSelection.push(row);
      //
      // } else {
      //   let index = this.multipleSelection.indexOf(row);
      //   this.multipleSelection.splice(index,1);
      //
      // }
      this.handleSelectionChange([row]);
      this.$refs.multipleTable.toggleRowSelection(row, !isExist);
      console.log("选中数组", this.multipleSelection);
    },
    // 每页条数发生改变
    handleSizeChange(val) {
      this.pageNoCode = 1;
      this.getStatementList();
    },
    // 当前页发生改变
    handleCurrentChange(val) {
      this.formData.pageNo = val;
      this.getStatementList();
    },
    // 上一页
    handlePrev() {
      --this.pageNoCode;
      this.getStatementList();
    },
    // 下一页
    handleNext() {
      ++this.pageNoCode;
      this.getStatementList();
    },
    cancel() {
      this.handleReset();
      this.dialogFormVisible = false;
      // setTimeout(() => {
      //
      // }, 500);
    },
    confirm() {
      console.log("点击确认", this.multipleSelection);
      if (this.multipleSelection < 1) {
        return this.$message({
          message: "未选择数据，请编辑后保存",
          type: "error",
          duration: 2000,
          ccuiCustom: true
        });
      }
      this.$emit("ok", this.multipleSelection, this.rowDetail);
      this.handleReset();
      this.dialogFormVisible = false;
    },
    handleReset() {
      this.multipleSelection = [];
      if (this.$refs.multipleTable) {
        this.$refs.multipleTable.clearSelection();
      }
      // this.tableDataList = [];
      this.isTrue = false;
      // this.list = [];
    },
    handleSelect(val) {
      this.keyWord = val.contractName;
      this.listItemIndex = val.concId;
      this.$emit("autocompleteSelect", val);
    },
    querySearchAsync: throttle(function(queryString, cb) {
      this.$emit("querySearchAsync", queryString, cb);
    }, 1000),
    handleScrollBottom(data, cb) {
      console.log(">>>>>>>>", data, "<<<<<<<<");
    },
    // 为禁用行添加样式
    tableRowClassName({ row, rowIndex }) {
      if (row.currentAccumulatedunPaiedAmt === 0) {
        return "prohibit";
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.chooseMaterials {
  display: inline-block;
}
/deep/ .sorting-code-number {
  .ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .el-dialog__body {
    box-sizing: border-box;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 914px;
    .el-dialog__body-bodys {
      height: 100%;
      .bodys-left {
        overflow-x: hidden;
        box-sizing: border-box;
        width: 245px;
        .el-input {
          width: 205px;
        }
        .bodys-left-list {
          padding: 20px;
          .list-item {
            display: flex;
            align-items: center;
            padding-left: 10px;
            padding-right: 5px;
            line-height: 35px;
            font-size: 13px;
            cursor: pointer;
            transition: 0.2s;
            &:hover,
            &.active {
              background-color: #e5f4ff;
              color: #0089ef;
            }
            .item-text {
              padding: 0 10px;
            }
          }
        }
      }
      .bodys-right {
        .el-table {
          .el-radio__label {
            padding-left: 12px;
          }
          .prohibit {
            cursor: not-allowed;
          }
        }
      }
    }
  }
}
.autocomplete-item {
  display: flex;
  align-items: center;
  span {
    padding: 0 10px;
  }
}
</style>
